<template>
	<div class="index-main">
		<div class="search-div">
			<div class="search-title">
				<p style="color: white;font-weight: normal;font-size: 60px">为您寻找最好的</p>
				<p style="color: rgb(39,174,96);font-weight: normal;font-size: 60px;margin-bottom: 40px;">二手房</p>
				<p style="color: white;">根据小区名称进行查询</p>
			</div>
			<div class="search-main">
				<el-autocomplete
				      class="inline-input"
				      v-model="search"
				      :fetch-suggestions="querySearch"
				      placeholder="请输入内容"
				      :trigger-on-focus="false"
				    ></el-autocomplete>
				<el-button icon="el-icon-search" circle style="margin-left: 10px;" @click="searchHouseByVillage"></el-button>
			</div>
		</div>
		<div class="tips-div">
			<div class="tips-title">
				<p style="font-size: 35px;line-height: 1.2;">如何发布或购买二手房?</p>
				<p style="color: #72809D;">购买或发布二手房只需要分三步</p>
			</div>
			<div class="tips-main">
				<div class="tips-process">
					<div class="tips-thumb">
						<div class="tips-thumb-figure">
							<svg-icon icon-file-name="account"></svg-icon>
						</div>
					</div>
					<div class="tips-caption">
						<h4>①注册一个账号</h4>
						<p style="color: #72809D;">无论是购买还是发布二手房都需要在平台注册账号信息，请妥善保存账号信息</p>
					</div>
				</div>
				<div class="tips-process active">
					<div class="tips-thumb">
						<div class="tips-thumb-figure">
							<svg-icon icon-file-name="search"></svg-icon>
						</div>
					</div>
					<div class="tips-caption">
						<h4>②站内寻找和搜索房源</h4>
						<p style="color: #72809D;">卖家需要参考自己小区的二手房价格，然后发布自己的房屋并设置合适的价格；买家则需要通过查看房源信息联系卖家</p>
					</div>
				</div>
				<div class="tips-process">
					<div class="tips-thumb">
						<div class="tips-thumb-figure">
							<svg-icon icon-file-name="order"></svg-icon>
						</div>
					</div>
					<div class="tips-caption">
						<h4>③创建订单</h4>
						<p style="color: #72809D;">买家找到合适的房子，买家和卖家通过线下联系沟通，最终通过平台创建订单完成交易</p>
					</div>
				</div>
			</div>
		</div>
		<div class="house-div">
			<el-divider content-position="center">最新房源推荐</el-divider>
			<el-link :underline="false" @click="$router.push({name:'House'})">&gt;&gt;更多福州二手房</el-link>
			<el-carousel type="card" height="400px" :autoplay="false" indicator-position="none" arrow="never">
				<el-carousel-item v-for="(item,i) in newHouseData" :key="i" @click.native="showHouse(item,i)">
					<houseShow :house="item"></houseShow>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script>
	import houseShow from './components/houseShow.vue'
	import {
		getNewHouse,
		getVillage,
		searchHouseByVillage
	} from '@/api/house'
	import {
		getData
	} from '@/api/data'
	export default {
		components: {
			houseShow
		},
		data() {
			return {
				houseSize: 5,
				newHouseData: [],
				zones:[],
				currentCarouselIndex: 0,
				// 模糊查询
				search: '',
				states: []
			}
		},
		created() {
			this.getNewHouseData()
			this.getZoneData()
			this.getVillage()
		},
		watch:{
		},
		methods: {
			async getVillage(){
				const res = await getVillage()
				if(res.code === 1){
					for (var i = 0; i < res.data.length; i++) {
					      this.states.push({"value": res.data[i]})
					     }
				}
			},
			// 查询
			querySearch(queryString, cb) {
			    var states = this.states;
			    var results = queryString ? states.filter(this.createFilter(queryString)) : states;
			    // 调用 callback 返回建议列表的数据
			    cb(results);
				results = ''
			},
			createFilter(queryString) {
			    return (states) => {
			        return (states.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			    };
			},
			searchHouseByVillage(){
				this.$router.push({
					name:"House",
					params:{
						village:this.search
					}
				})
			},
			//
			showHouse(house, i) {
				if (this.currentCarouselIndex === i) {
					//TODO 跳转到房源详细页
					this.$router.push({
						path:'/detail',
						   query:{
						       id:house.id
						   }
					})
				} else {
					this.currentCarouselIndex = i
				}
			},
			async getNewHouseData() {
				const res = await getNewHouse(this.houseSize)
				this.newHouseData = res.data
			},
			async getZoneData() {
				const {data} = await getData("zone_id")
				for (var i = 0; i < data.length; i++) {
				  let obj = {
				    value:data[i].valueEn,
				    label:data[i].value
				  }
				  this.zones.push(obj)
				}
				this.$store.commit("setZones",this.zones)
			}
		}
	}
</script>

<style scoped>
	/* 跑马灯 */
	.el-carousel {
		margin-top: 40px;
	}


	/* 更多 */
	.el-link--inner {
		color: #888;
		margin-bottom: 40px;
	}

	/* 水平线 */
	.el-divider--horizontal {
		top: 40px;
		margin: 60px 0;
	}

	.el-divider__text {
		background-color: #f6f6f6;
		font-size: 32px;
		font-weight: bolder !important;
	}

	.house-div {
		background-color: #f6f6f6;
		margin-top: 80px;
		text-align: center;
		padding-bottom: 40px;
	}

	/* 搜索面板 */
	.search-div {
		background: #f6f6f6 url('~@/assets/main1_bg.png') no-repeat;
		background-size: cover;
		height: 510px;
		padding: 5em 0;
		text-align: center;
	}

	.search-title p {
		margin: 0;
	}

	.search-main {
		display: inline-block;
		margin-top: 30px;
	}

	.svg-icon {
		width: 45px;
		height: 45px;
	}
</style>
